<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 适配移动端 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui">
		<title>发发圈</title>
		<!-- 引入fontawesome5css -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
		<!-- 引入自己的css -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/index.css" />
	</head>

	<body id="body-color">
		<!-- 发布任务 -->
		<div id="release-task">
			<!-- 页头 -->
			<div class="header">
				<a href="javascript:history.back(-1);"><i class="fas fa-chevron-left"></i></a>
				<h1>发布任务</h1>
				<a href="{:U('Task/record')}"><i class="fas fa-history"></i></a>
			</div>

			<!-- 主题 -->
			<div class="main">
				<div class="container">
					<form id="form" action="{:U('Task/add')}" method="post" enctype="multipart/form-data">
						<div class="title">
							<h3>标题</h3>
							<input type="text" name="title" placeholder="请输入标题" autocomplete="off" />
						</div>
						<div class="content">
							<textarea name="content" placeholder="请输入内容"></textarea>
						</div>
						<div class="file">
							<div class="img"></div>
							<div>
								<input type="text" value="上传图片" autocomplete="off" onclick="$('input[name=ups]').click();" />
								<p>点击图片可删除</p>
							</div>
							<input type="file" id="file-img" name="ups" accept="image/gif, image/jpeg, image/png, image/jpg, image/webp">
						</div>
						<div class="price">
							<div>
								<h2>今日广告单价</h2>
								<input type="text" id="prce" name="price" value="￥2" placeholder="最低单笔费用为2元" autocomplete="off" disabled="disabled" />
							</div>
							<p>本价格根据平台会员活跃指数动态调价</p>
						</div>
						<div class="quantity">
							<h3>任务数量</h3>
							<input type="text" id="num" name="quantity" placeholder="最低为2000" autocomplete="off" />
						</div>
						<div class="totalprice">
							<h3>广告总价</h3>
							<input type="text" id="total" name="quantity" value="0" placeholder="最低为2000" autocomplete="off" disabled="disabled" />
						</div>
						<div class="submit">
							<input type="hidden" id="img-post" name="img" />
							<input type="submit" value="发布任务" />
						</div>
					</form>
				</div>
			</div>

			<!-- 页脚 -->
			<div class="footer">
				<p>注：发布需求超过1000条的客户请直接联系客服，咨询广告发布套餐价！</p>
			</div>
		</div>

		<!-- 引入jQuery3js -->
		<script src="__PUBLIC__/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			// ajax上传图片
			$(function() {
				$("#file-img").change(function() {
					var form = $("#form")[0];
					var formData = new FormData(form);

					$.ajax({
						type: "post",
						url: "{:U('Task/ajax_img')}",
						data: formData,
						async: true, //false
						cache: false,
						contentType: false,
						processData: false,
						success: function(data) {
							if(data) {
								$("#img-post").val(data);
								var img = "<img src='__UPLOADS__/" + data + "' width='50' height='50'/>";
								$(".img").html(img);
							}
						}
					});
				});

				$("#num").bind('input', function() {
					$("#total").val($(this).val() * parseInt($("#prce").val().replace(/[^0-9]/ig, "")));
				})
			})
		</script>
	</body>

</html>